<template>
    <div style="display: flex; justify-content: center; background-color: #fff;">
        <div style="width: 755px;">
            <div style="width:755px">
                <div style="overflow: hidden;">
                    <div class="about-top">
                        <div style="display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(1, 90px);">
                            <div style="margin-top: 20px; padding-left: 20px; font-size: 18px;">
                                <span style="display: block; padding-left: 5px;color: #fff;">邮箱咨询</span>
                                <span style="color: #fff; font-weight: bold;" >sales@rubysci.com</span>
                            </div>
                            <div style="margin-top: 20px; padding-right: 20px; font-size: 18px;">
                                <span style="display: block; padding-left: 5px;color: #fff;">技术服务热线</span>
                                <span style="color: #fff; font-weight: bold;" >400-706-0381</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div style="margin-top: 10px;">
                    <el-table :data="productFile" style="width: 100%">
                        <el-table-column type="index" />
                        <el-table-column prop="serial" label="产品编号" width="150"/>
                        <el-table-column prop="title" label="产品名称"  width="400" show-overflow-tooltip/>
                        <el-table-column fixed="right" label="查看详细信息" >
                            <template #default="scope">
                                <el-button link type="primary" size="small"
                                    @click="openFile(scope.row.id)">
                                    查看详情
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { reactive, ref } from 'vue';
import { useRouter } from 'vue-router';
import { getProductFile } from "../requests/index";
import { ElMessage } from 'element-plus';

const router = useRouter();
const productFile = ref();

// 技术服务列表
const forProductFile = async()=>{
    const res = await getProductFile();
    if (res.status === 2000){
        productFile.value = res.data;
    }else{
        console.log(res.msg)
    }
};
forProductFile();


const openFile = async(id)=>{
    const res = await getProductFile({"id": id});
    if (res.status === 2000){
        console.log(res.data)
        window.open(res.data, "_blank")
    }else{
        console.log(res.msg)
    }
}

</script>

<style scoped>

.about-top{
    width:100%;
    height:100px;
    font-size:14px;
    line-height:30px;
    text-align:center;
    background: linear-gradient(to right, rgb(6, 190, 182), rgb(72, 177, 191));
    border-radius: 5px;
    background-size:100% 100%;
    margin-bottom: 20px;
    padding:3px 0 ; 
}
</style>